<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>登录</title>
  <script src="/js/jquery-3.5.1.min.js"></script>
  <style>
    body {
      margin: 0 auto;
      height: 100%;
      width: 100%;
    }
    body::after{
      top:0;
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      background: url(/bj2.png);
      background-size: cover;
      filter: blur(1px);
    }

    .content {
      width: 320px;
      margin: 150px auto 50px;
      background:rgba(255, 255, 255, 0.6);
      padding: 20px 30px 40px;
      font-size: 14px;
      min-height: 300px;
      border-radius: 4px;
      position: relative;
      z-index: 1;
    }
    .title{
      font-size: 18px;
      text-align: center;
      font-weight: bold;
      line-height: 3;
    }
    .flex {
      display: flex;
      align-items: center;
      margin-bottom:20px; 
    }
    input,button{
      outline:none;
      border-radius: 4px;
    }

    input {
      height: 40px;
      box-sizing: border-box;
      padding: 0 10px;
      color: #323232;
      flex: 1;
      border: 1px solid #ddd;
      background:#f6f6f6;
    }

    input::placeholder{
      color: #323232;
    }

    input:hover{
      background:#fff;
    }

    .button {
      width: 100%;
      height: 40px;
      color: #fff;
      background: #7e77c5;
      border: none;
      font-size: 14px;
      margin-bottom: 15px;
      cursor: pointer;
    }
    button:focus{ 
      border:none;
    }
    button:hover{
      background:#5b53b1;
    }
    a{
      color:#222;
      text-decoration: none;
    }
    a:hover{
      text-decoration: underline;
    }
  </style>

</head>

<body>
  <div class="content">
    <div class="title">登录</div>
    <div class="flex">
      <!-- <span id="basic-addon1">邮箱</span> -->
      <input class="input" placeholder="请输入邮箱" id="email" name="email" type="text" aria-describedby="basic-addon1" />
    </div>
    <div class="flex">
      <!-- <span id="basic-addon2">密码</span> -->
      <input class="input" placeholder="请输入密码" id="password" name="password" type="password" aria-describedby="basic-addon2" />
    </div>
    <button class="button"  id="login" name="login" type="button">登 录</button>
    <a href="/register.html">注册新账号</a>
    
  </div>
</body>
<script type="text/javascript">
  $("#login").click(function () {
    var email = document.getElementById("email").value;
    var password = document.getElementById("password").value;
    $.ajax({
      url: "/api/user/login/" + email + "/" + password,
      type: "GET",
      success: function (data) {
        if (data.code == 200) {
          window.location.href = '/welcome.html?email=' + email;
        } else if(data.code == 201){
          alert("登录失败")
        } else{
          window.location.href = '/welcome.html?email=' + email;
        }
      }
    });
  });
</script>

</html>